<script lang="ts" setup>
/**
 * @ClassName app-login
 * @Description 用户登录
 * @Author xuyizhuo
 * @Date 2024/12/10 20:24
 */

import { useRouter } from 'vue-router'
import UserAuth from '@/utils/userAuth'
import { ref } from 'vue'

const router = useRouter()

const loginInfo = ref({
    loginName: '',
    loginPassword: '',
})
const onLogin = (event: Event) => {
    event.preventDefault()
    console.log('用户登录')
    const { loginName, loginPassword } = loginInfo.value
    if (!(loginName && loginPassword)) {
        alert('用户名或密码错误')
        return
    }
    UserAuth.setToken(`${loginName}_${loginPassword}`)
    router.push('/')
}
</script>

<template>
    <div class="app-login">
        <div class="container">
            <form id="b-form" action="" class="form" method="">
                <h2 class="form_title title">欢迎登录</h2>
                <input v-model:="loginInfo.loginName" class="form__input" placeholder="请输入用户名" type="text" />
                <input
                    v-model:="loginInfo.loginPassword"
                    class="form__input"
                    placeholder="请输入密码"
                    type="password"
                />
                <a class="form__link">忘记密码?</a>
                <button class="form__button button submit" @click="onLogin">登录</button>
            </form>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.app-login {
    $bg: #edf2f0;

    $neu-1: #ecf0f3;
    $neu-2: #d1d9e6;

    $white: #f9f9f9;
    $gray: #a0a5a8;
    $black: #181818;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

    @media screen and (max-width: 800px) {
        .container {
            margin: 0 80px;
            width: 100%;
            min-width: 340px;
        }
    }

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 1.25s;
        box-shadow:
            6px 6px 6px $neu-2,
            -6px -6px 6px $white;
        border-radius: 12px;
        background-color: $neu-1;
        padding: 25px;
        width: 600px;
        height: 600px;
        overflow: hidden;

        &:hover {
            box-shadow:
                12px 12px 12px $neu-2,
                -12px -12px 12px $white;
        }
    }

    .form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;

        &__input {
            transition: 0.25s ease;
            margin: 4px 0;
            outline: none;

            box-shadow:
                inset 2px 2px 4px $neu-2,
                inset -2px -2px 4px $white;
            border: none;
            border-radius: 8px;
            background-color: $neu-1;

            padding-left: 25px;
            width: 100%;
            max-width: 350px;
            height: 40px;
            font-size: 13px;

            font-family: 'Montserrat', sans-serif;
            letter-spacing: 0.15px;

            &:focus {
                box-shadow:
                    inset 4px 4px 4px $neu-2,
                    inset -4px -4px 4px $white;
            }
        }

        &__span {
            margin-top: 30px;
            margin-bottom: 12px;
        }

        &__link {
            margin-top: 25px;
            border-bottom: 1px solid $gray;
            color: $black;
            font-size: 15px;
            line-height: 2;
        }

        &__button {
            cursor: pointer;

            &:hover {
                transform: scale(0.985);
                transition: 0.25s;
                box-shadow:
                    6px 6px 10px $neu-2,
                    -6px -6px 10px $white;
            }

            &:active,
            &:focus {
                transform: scale(0.97);
                transition: 0.25s;
                box-shadow:
                    2px 2px 6px $neu-2,
                    -2px -2px 6px $white;
            }
        }
    }

    .title {
        color: $black;
        font-weight: 700;
        font-size: 34px;
        line-height: 3;
    }

    .description {
        font-size: 14px;
        line-height: 1.6;
        letter-spacing: 0.25px;
        text-align: center;
    }

    .button {
        margin-top: 50px;
        outline: none;
        box-shadow:
            8px 8px 16px $neu-2,
            -8px -8px 16px $white;

        border: none;
        border-radius: 25px;

        background-color: var(--app-button-primary-bg);
        width: 180px;
        height: 50px;
        color: $white;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 1.15px;
    }
}
</style>
